<template>
    <div>
        <div id="dd">
            
        </div>
        <el-table
    :data="pagelist"
    style="width: 100%">
    <el-table-column 
      prop="id"
      label="图书编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="图书名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="summary"
      label="内容">
    </el-table-column><el-table-column
      prop="uploaduser"
      label="上传人">
    </el-table-column><el-table-column
      prop="createdate"
      label="时间">
    </el-table-column>
    <el-table-column
      label="操作">
      <el-row slot-scope="scope">
	<el-button type="primary">修改</el-button>
	<el-button type="danger" @click="deleteby(scope.row.id)">删除</el-button>
</el-row>
    </el-table-column>
    </el-table>

    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 4, 8]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
    </div>
  </template>
  
  <script>
  import {findEntryByPage} from '../../api/main'
  export default {
      data(){
          return{
            pagelist:[],//分页集合
            currentPage:1,
            pageSize:5,
            total:20
          }
      },methods:{
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize=val;
        this.getPage();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage=val;
        this.getPage();
      },
        async getPage(){
            let res=await findEntryByPage(this.currentPage,
            this.pageSize,this.title);
            console.log(res);
            this.pagelist=res.data.pages.records;
          this.total=res.data.pages.total;
        }
      },created(){
    this.getPage();
}
  
  }
  </script>
  
  <style>
  #dd{
    display: flex;
    justify-content: center;
  } .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }button{
    background-color: aqua;
  }#xx{
    display: flex;
    justify-content: center;
  }
  </style>